   <template>
<div>
  <nut-tab @tab-switch="tabSwitch"  position-nav="left" :init-data="editableTabs" :is-scroll="true"
           :wrapper-height="clientHeight-80" >
    <nut-tab-panel
        v-for="(item,index) in editableTabs"
        :key="item.id"
        :tab-title="item.type"
    >

      <button v-for="(item,index) in editableTabsInfo">{{ item.type }}</button>
    </nut-tab-panel>

  </nut-tab>
</div>
</template>

<script>

export default {
  name: "goodstype",
  methods:{
    tabSwitch:function(index,event){

      var params=new URLSearchParams();
      params.append("id",this.editableTabs[index].id);
      this.$axios.post("/goodsinfotype/selectByGoodsTypeId",params).then(
          res => {
            this.editableTabsInfo=res.data.data;

          }
      )

    },

  },
  data(){
    return{
      editableTabs:[],
      clientHeight:700,
      editableTabsInfo:[]
    }
  },
  mounted() {
   this.clientHeight= document.documentElement.clientHeight;
    this.$axios.post("/goodstype/selectAll",).then(
        res => {
            this.editableTabs=res.data.data;
          var params=new URLSearchParams();
          params.append("id",this.editableTabs[0].id);
        this.$axios.post("/goodsinfotype/selectByGoodsTypeId",params).then(
        res => {
          this.editableTabsInfo=res.data.data;
        }
    )

        }
    )
  }
}
</script>

<style scoped>
>>>.nut-tab{
  background: none;
  padding:10px;
  border: none;
}
</style>
